<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cate</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/icon.css" />
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>

<body>

    <a href="#" class="easyui-linkbutton" onclick="changeType(1)">新闻分类</a>
    <a href="#" class="easyui-linkbutton" onclick="changeType(2)">产品分类</a>
    <a href="#" class="easyui-linkbutton" onclick="changeType(3)">相册分类</a>
    <a href="#" class="easyui-linkbutton" onclick="changeType(4)">地区分类</a>
    <!-- <ul class="easyui-tree" data-options="url:'http://localhost:3000/cate/list',method:'post',animate:true"></ul> -->
    <ul id="tt" class="easyui-tree" data-options="animate:true,checkbox:true,cascadeCheck:false"></ul>

    <div style="text-align:center;padding:5px 0 ">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addsib()" style="width:100px">添加同级数据</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addch()" style="width:100px">添加子级数据</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="change()" style="width:80px">修改数据</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="del()" style="width:80px">删除数据</a>

    </div>
    <div id="dlg" class="easyui-dialog" title="数据操作" data-options="iconCls:'icon-save',closed:true" style="width:600px;height:400px;padding:10px">
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="parentId" style="width:100%" data-options="label:'分类父级:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'分类id:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="type" style="width:100%" data-options="label:'分类级别:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'分类名称:',required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
</body>

</html>
<script>
    function changeType(type) {
        $('#tt').tree({
            url: `http://localhost:3000/cate/list/${type}`,
            method: 'post'
        });
    }

    changeType(1);

    function clearForm() {
        $('#ff').form('clear');
        $('#dlg').dialog('close');
    };
    //添加数据
    function addsib() {
        var addDatas = getChecked();

        if (addDatas.length == 0) {
            $.messager.confirm('确认框', '请选中一条数据');
        };
        if (addDatas.length > 1) {
            $.messager.confirm('确认框', '请勿选中多条数据');
        };
        if (addDatas.length == 1) {
            var id = addDatas[0].id;
            console.log(addDatas);
            $('#dlg').dialog('open');
            $.ajax({
                url: `http://localhost:3000/cate/${id}`,
                type: 'get'
            }).done(res => {
                console.log(res);
                $('#ff').form('load', {
                    parentId: res.parentId,
                    type: res.type
                }); //读取记录填充到表单中
                $('#dlg').dialog('open');
            });

        }

    };

    function addch() {
        var addDatas = getChecked();

        if (addDatas.length == 0) {
            $.messager.confirm('确认框', '请选中一条数据');
        };
        if (addDatas.length > 1) {
            $.messager.confirm('确认框', '请勿选中多条数据');
        };
        if (addDatas.length == 1) {
            var id = addDatas[0].id;
            console.log(addDatas);
            $('#dlg').dialog('open');
            $.ajax({
                url: `http://localhost:3000/cate/${id}`,
                type: 'get'
            }).done(res => {
                console.log(res);
                $('#ff').form('load', {
                    parentId: res._id,
                    type: res.type
                }); //读取记录填充到表单中
                $('#dlg').dialog('open');
            });

        }
    };
    //修改数据
    function change() {

        var changeDatas = getChecked();
        if (changeDatas.length == 0) {
            $.messager.confirm('确认框', '请选中一条数据');
        };
        if (changeDatas.length > 1) {
            $.messager.confirm('确认框', '请勿选中多条数据');
        };
        if (changeDatas.length == 1) {
            var id = changeDatas[0].id;
            console.log(changeDatas);
            $('#dlg').dialog('open');
            $.ajax({
                url: `http://localhost:3000/cate/${id}`,
                type: 'get'
            }).done(res => {
                console.log(res);
                $('#ff').form('load', res); //读取记录填充到表单中
                $('#dlg').dialog('open');
            });

        }

    };

    function getChecked() {
        var nodes = $('#tt').tree('getChecked');
        var datas = [];

        for (var i = 0; i < nodes.length; i++) {
            datas.push({
                parentId: nodes[i].parentId,
                id: nodes[i]._id,
                type: nodes[i].type
            })
        }
        return datas;
    };

    function del() {
        var getDatas = getChecked();
        if (getDatas.length == 0) {
            $.messager.confirm('确认框', '请选中一条数据');
        };
        if (getDatas.length > 1) {
            $.messager.confirm('确认框', '请勿选中多条数据');
        };
        if (getDatas.length == 1) {
            $.messager.confirm('确认框', '你确认要删除这条数据吗?', function(r) {
                if (r) {
                    $.ajax({
                        url: `http://localhost:3000/cate/${getDatas[0].id}`,
                        type: 'delete'
                    }).done(res => {
                        $('#tt').tree('reload');
                    })
                }
            });
        };

    };

    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                //console.log($('#ff').serialize());
                //console.log($('#ff').serializeArray());
                var formData = $('#ff').serializeJSON();
                console.log(formData);
                if ($('#ff').serializeJSON()._id) {
                    //修改
                    if ($(this).form('enableValidation').form('validate')) {
                        $.ajax({
                            url: `http://localhost:3000/cate/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).done(res => {
                            console.log(res); //添加成功
                            $('#dlg').dialog('close');
                            $('#tt').tree('reload');
                            $('#ff').form('clear'); //清空
                        })
                    }
                } else {
                    //新增的时候不得有_id
                    delete formData._id;
                    if ($(this).form('enableValidation').form('validate')) {
                        $.ajax({
                            url: 'http://localhost:3000/cate',
                            type: 'post',
                            data: formData
                        }).done(res => {
                            console.log(res); //添加成功
                            $('#dlg').dialog('close');
                            $('#tt').tree('reload');
                            $('#ff').form('clear');
                        })
                    }
                };
                return false;
            }

        });
    }
</script>